<template>
  <div class="node-area">
    <HeaderSearch class="header-search">
      <template>
        <el-form class="search-from" label-position="left" :inline="true">
          <el-form-item label="合作商搜索：" class="area-search">
            <el-input v-model="area" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item class="search-btn">
            <el-button
              plain
              icon="el-icon-search"
              class="btn"
              @click="getAreaList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
    </HeaderSearch>
    <TableContent
      ref="TableContent"
      :params="params"
      :tableData="tableData"
      :areaList="areaList"
    >
      <template #addBtn>
        <el-col class="col-btn">
          <el-button
            type="info"
            icon="el-icon-circle-plus-outline"
            @click="changeArea('add')"
            >新建</el-button
          >
        </el-col>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" @click="reset(row)"> 重置密码 </el-button>
        <el-button type="text" size="small" @click="check(row)">
          查看详情
        </el-button>
        <el-button type="text" size="small" @click="changeArea('edit', row)">
          修改
        </el-button>
        <el-button
          type="text"
          size="small"
          style="color: red"
          @click="delArea(row.id)"
        >
          删除
        </el-button>
      </template>
    </TableContent>
    <CheckDialog ref="CheckDialog" title="合作商详情">
      <template #content>
        <el-row gutter="10">
          <el-col :span="4">
            <p style="text-align-last: right; height: 30px">合作商名称：</p>
            <p style="text-align-last: right; height: 30px">联系电话：</p>
          </el-col>
          <el-col :span="8">
            <p style="height: 30px">{{ areaDetails.name }}</p>
            <p style="height: 30px">{{ areaDetails.mobile }}</p>
          </el-col>
          <el-col :span="4">
            <p style="text-align-last: right; height: 30px">联系人：</p>
            <p style="text-align-last: right; height: 30px">分成比例：</p>
          </el-col>
          <el-col :span="8">
            <p style="height: 30px">{{ areaDetails.contact }}</p>
            <p style="height: 30px">{{ areaDetails.ratio }}%</p>
          </el-col>
        </el-row>
      </template>
    </CheckDialog>
    <AddOrEdit ref="AddOrEdit" :title="title" @addArea="addArea">
      <template #formDialog>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="right"
          label-width="140px"
        >
          <el-form-item label="合作商名称：" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contact">
            <el-input
              v-model="form.contact"
              placeholder="请输入"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="请输入"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="分成比例（%）：" prop="ratio">
            <el-input v-model="form.ratio" placeholder="请输入">
              <template #append>
                <div class="add-sub">
                  <i class="el-icon-arrow-up" @click="addRatio"></i>
                  <i class="el-icon-arrow-down" @click="subRatio"></i>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="账号："
            prop="account"
            v-if="title === '新增合作商'"
          >
            <el-input
              v-model="form.account"
              placeholder="请输入"
              maxlength="18"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码："
            prop="password"
            v-if="title === '新增合作商'"
          >
            <el-input
              v-model="form.password"
              placeholder="请输入"
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
    </AddOrEdit>
  </div>
</template>

<script>
import HeaderSearch from '../components/HeaderSearch'
import TableContent from '../components/TableContent'
import CheckDialog from '../components/CheckDialog'
import AddOrEdit from '../components/AddOrEdit'
import { getPartnerList, delPartner, addPartner, editPartner, resetPassword } from '@/api/point'
export default {
  name: 'Dkd2Cooperation',

  components: {
    HeaderSearch,
    TableContent,
    CheckDialog,
    AddOrEdit
  },
  data () {
    return {
      // 地区查询
      area: '',
      // 分页
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: {},
      // 表头
      areaList: {
        name: '合作商名称',
        account: '账号',
        vmCount: '设备数量',
        ratio: '分成比例',
        contact: '联系人',
        mobile: '联系电话'
      },
      // 区域详情
      areaDetails: {},
      // 表单标题
      title: '',
      // 表单
      form: {
        ratio: null
      },
      // 规则
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        ratio: [
          { required: true, message: '请输入', trigger: 'blur' }
          // { validator: validatePass, trigger: 'blur' }
        ],
        account: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },

  watch: {
  },

  mounted () {
    this.getAreaList()
  },

  methods: {
    // 获取表格数据
    async getAreaList () {
      let res
      try {
        this.$refs.TableContent.loading = true
        if (this.area) {
          res = await getPartnerList({ ...this.params, name: this.area })
        } else {
          res = await getPartnerList(this.params)
        }
      } finally {
        this.$refs.TableContent.loading = false
      }
      if (res.currentPageRecords.length <= 0 && this.params.pageIndex > 1) {
        this.params.pageIndex--
        this.getAreaList()
      }
      res.currentPageRecords.forEach((ele) => {
        ele.ratio = ele.ratio + '%'
      })
      this.tableData = res
    },
    // 删除数据
    async delArea (id) {
      this.$confirm('是否要删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delPartner(id)
          this.$message.success('合作商删除成功')
          this.getAreaList()
        } catch (err) {
          this.$message.error(err.response.data)
        }
      })
    },
    // 查看详情
    async check (row) {
      this.$refs.CheckDialog.visible = true
      // const res = await checkArea({ ...this.params, regionId: id })
      this.areaDetails = row
    },
    // 新增或修改
    changeArea (val, row) {
      if (val === 'add') {
        this.title = '新增合作商'
      } else {
        this.title = '修改合作商'
        this.form = { ...row }
        this.form.ratio = this.form.ratio.split('%')[0]
      }
      this.$refs.AddOrEdit.visible = true
    },
    // 新增区域
    async addArea () {
      try {
        if (this.title === '新增合作商') {
          await this.$refs.form.validate()
          await addPartner(this.form)
          this.$message.success('新增成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        } else {
          await this.$refs.form.validate()
          await editPartner(this.form)
          this.$message.success('修改成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        }
      } catch (err) {
        this.$message.error(err.response.data)
      }
    },
    // 百分比
    addRatio () {
      this.form.ratio ? this.form.ratio++ : (this.form.ratio = 1)
    },
    subRatio () {
      this.form.ratio <= 0 ? (this.form.ratio = 0) : this.form.ratio--
    },
    // 重置密码
    async reset (row) {
      this.$confirm('确认要重置合作商密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        await resetPassword(row.id)
        this.$message.success('密码重置成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header-search {
  .search-from {
    text-align-last: left;
    height: 100%;
    .area-search {
      width: 20%;
      margin: 0;
      /deep/ .el-form-item__label {
        line-height: 64px !important;
      }
      /deep/ .el-form-item__content {
        line-height: 64px !important;
        .el-input__inner {
          height: 36px;
        }
      }
    }

    .search-btn {
      height: 100%;
      margin: 0;
      padding: 14px;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 36px;
        background-color: #5f84ff;
        color: #fff;
        padding: 0;
      }
    }
  }
}
/deep/ .el-input-group__append {
  padding: 0;
  width: 40px;
  .add-sub {
    display: flex;
    flex-direction: column;
    padding: 0;
    .el-icon-arrow-up {
      cursor: pointer;
      width: 100%;
      border-bottom: 1px solid #d8dde3;
      text-align: center;
    }
    .el-icon-arrow-down {
      cursor: pointer;
      text-align: center;
    }
  }
}
</style>
